.box1{
    .box2{
        color: red;
    }
    >.box3{
        color: red;
    }
    // 为box1设置伪类
    &:hover{
        color: sandybrown;
    }
    div &{
        width: 100px;
    }
}

.p1{
    width: 100px;
    height: 200px;
}
// 扩展 对当前选择器扩展指定选择器的样式
.p2:extend(.p1){
    color: seagreen;
}
// 混合 直接引用其他元素样式 混合性能比扩展差
.p3{
    .p1();
}
// 使用类选择器时可以在选择器后添加括号,实际上创建了一个mixins混合函数
.p4(){
    width: 100px;
    height: 100px;
}
.p5{
    .p4()
}

// 混合函数中可以直接设置变量
.test(@w){
    width: @w;
    height: 100px;
    border: 1px solid red;
}

div{
    .test(200px)
}

span{
    // 取平均
    color: average(#000000,#ffffff);
    // 颜色加深
    background-color: darken(#ffffff,10%);
}